<template>
  <div class="check-page">
    <checkheader title @fatherMethod="fatherMethod"></checkheader>
    <div class="muicontent">
      <div class="check-time">
        <p>卖包
          时间</p>
        <input type="text" readonly="readonly" v-model="datetime" @click="openPicker" class="sell-input" />
        <div class="datePicker">
          <nut-datepicker
            type="date"
            :is-show-chinese="false"
            :is-visible="isVisible"
            title="请选择日期时间"
            :startDate='times'
            endDate="2050-12-30"
            :defaultValue='times'
            @close="switchPicker('isVisible')"
            @choose="setChooseValue"
          ></nut-datepicker>
        </div>
        <p class="sell-price">卖包价格</p>
        <div class="time-img">
          <img src="../../../static/images/mycheck/sell.png" alt />
          <input type="number" placeholder="请输入卖包价格" class="input" v-model="price" />
        </div>
      </div>
    </div>

    <checkfoot @resetTime="resetTime" @confirmTime="confirmTime"></checkfoot>
  </div>
</template>

<script>
import checkheader from './checkHeader'
import checkfoot from './checkFoot'
export default {
  name: 'selltime',
  data () {
    return {
      isVisible: false, // 时间选择框默认false
      datetime: new Date().getFullYear() + '-' + this.timeFormat(new Date().getMonth() + 1) + '-' + this.timeFormat(new Date().getDate()), // 双向数据datetime初始时间
      price: '', // 双向数据
      times: this.$route.query.startTime
    }
  },
  methods: {
    switchPicker (param) {
      // 传递过来的是哪个时间框
      this[`${param}`] = !this[`${param}`]
    },
    timeFormat (num) {
      if (num < 10) { return '0' + num }
      return num
    },
    setChooseValue (param) {
      // 赋值时间
      this.datetime = param[3]
    },
    openPicker () {
      // 显示隐藏时间日期弹框
      this.isVisible = !this.isVisible
    },
    resetTime () {
      // 重置
      this.datetime = new Date().getFullYear() + '-' + this.timeFormat(new Date().getMonth() + 1) + '-' + this.timeFormat(new Date().getDate())
      this.price = ''
    },
    confirmTime () {
      // 确定
      this.$http.post(`${this.baseUrl.editAccountBook}`,
        {accountBookId: this.$route.query.goodsId,
          sellOutTime: this.datetime,
          sellOutPrice: this.price}).then((res) => {
        if (res.data.code === 200) {
          this.$router.push({ name: 'mycheck' })
        }
      })
    },
    fatherMethod () {
      // 给头部传递返回上我的账本的方法
      this.$router.push({ name: 'mycheck' })
    }
  },
  components: {
    checkheader,
    checkfoot
  }
}
</script>

<style lang="stylus" scoped>
.muicontent {
  position: absolute;
  top: 0.9rem;
  bottom: 0rem;
  left: 0;
  right: 0;
  overflow-y: auto;

  .check-time {
    border-top: 0.01rem solid $color-content-border;
    padding: 0.4rem 0.3rem 0rem 0.3rem;

    p {
      font-size: 0.24rem;
      color: $color-search-text;
    }

    .sell-price {
      padding-top: 0.2rem;
    }

    .time-img {
      width: 100%;
      height: 0.7rem;
      line-height: 0.7rem;
      background-color: $color-input;
      margin: 0.3rem 0 0.4rem;

      img {
        height: 0.5rem;
        margin: 0 0.4rem;
      }

      .input {
        background-color: $color-input;
        text-align: left;
        width: 5.4rem;
      }
    }

    .sell-input {
      background-color: $color-input;
      width: 100%;
      height: 0.7rem;
      margin: 0.3rem 0 0.4rem;
      text-align: center;
      font-size: 0.26rem;
      color: $color-text;
    }
  }
}
</style>
